<template>
	<!--表格单选-->
	<el-row class="order">
  		<el-col :span="24">
  			<!--查询过滤条件-->
  			<el-form :inline="true" :model="conditionForm" ref="conditionForm" label-width="82px">
				<el-form-item label="订单状态">				
					<el-select v-model="conditionForm.orderStatus" filterable placeholder="请选择">
						<el-option label="全部" value=""></el-option>
						<el-option v-for="status in orderStatusList" :label="status.name" :value="status.id"></el-option>
						<!-- <el-option label="已取消" value="101"></el-option>
						<el-option label="待付款" value="0"></el-option>
						<el-option label="待发货" value="201"></el-option>
						<el-option label="待收货" value="210"></el-option>
						<el-option label="已完成" value="211"></el-option> -->
					</el-select>
				</el-form-item>
				<el-form-item label="创建时间">				
					<el-date-picker v-model="conditionForm.orderTime" type="datetimerange" align="right" value-format="['yyyy-MM-dd HH:mm:ss']" format="yyyy-MM-dd HH:mm:ss"
						start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00']">
					</el-date-picker>
				</el-form-item>
				<el-button type="primary" size="small" icon="search" @click="queryTableData">查询</el-button>
			</el-form>
  		</el-col>
  		<el-col :span="24">
  			<!--表格数据展示-->
  			<div>
	  			<!-- <el-button type="primary" size="small" icon="plus" v-on:click="addFn">新增</el-button> -->
	  			<el-button type="primary" size="small" icon="edit" v-on:click="editFn">修改</el-button>
	  			<el-button type="primary" size="small" icon="delete" v-on:click="deleteFn">删除</el-button>
  			</div>
  			<div class="data-list">
				<el-table :data="tableDatalist" border style="width: 100%" highlight-current-row @current-change="handleCurrentChange"
					@row-click="handleExpandTable" @expand-change="handleExpandTable">
					<el-table-column width="50">
						<template slot-scope="scope">
							<label class="radio">
								<input type="radio" value="2" name="radio" :data-index="scope.row.index">
								<span class="dot"></span>
							</label>
						</template>
					</el-table-column>
					<el-table-column type="expand">
						<template slot-scope="props">
					        <el-form v-for="goods in orderGoodslist[props.row.id]" label-position="left" inline class="order-table-expand">
								<el-form-item v-for="column in orderGoodsColumn" v-if="column.isColumnShow" :prop="column.columnName" :label="column.columnLabel">
									<span>{{ goods[column.columnName] }}</span>
								</el-form-item>
					        </el-form>
					    </template>
					</el-table-column>
					<el-table-column v-for="column in tableColumn" :prop="column.columnName" :label="column.columnLabel" 
						v-if="column.isColumnShow" :show-overflow-tooltip="true" sortable>
						<template slot-scope="scope" >
							<div v-if="column.type==='pic' && scope.row[column.columnName]!= undefined && scope.row[column.columnName].indexOf('http') ===0" >
								<img :src="scope.row[column.columnName]" :alt="scope.row[column.columnName]" style="width: 70px;height: 70px">
							</div>
							<div v-else>
								{{ scope.row[column.columnName] }}
							</div>
						</template>
					</el-table-column>
				</el-table>
				<el-pagination
			      @size-change="pageSizeChange"
			      @current-change="handleCurrentChangePage"
			      :current-page="pagination.currentPage"
			      :page-sizes="[10,20, 50, 100, 200]"
			      :page-size="pagination.pageSize"
			      layout="->,prev, pager, next, jumper, sizes,total"
			      :total="pagination.totalSize">
			    </el-pagination>
			</div>
  		</el-col>
  		<el-col :span="24">
  			<!--新增和修改 dialog-->
			<el-dialog :title="dialogTitle" v-if="dialogVisible" :visible.sync="dialogVisible">
				<el-form :model="configform" ref="configform" :rules="rules" label-width="100px">
					<m-dialog-form-item v-for="column in tableColumn" :configform="configform" :columnInfo="column"
						:uploadImgAttr="uploadDatas">
					</m-dialog-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="closeDialog">取 消</el-button>
					<el-button type="primary" @click="saveSubmit">确 定</el-button>
				</div>
			</el-dialog>
		</el-col>
	</el-row>
</template>
<script>
	import {
		Message
	} from 'element-ui';
	import Vue from 'vue'
	import store from '../../store'
	export default {
		components:{},
		data() {
			return {
				tableDatalist:[],
				orderGoodslist:[],
				orderStatusList:[],
				userList:[],
				conditionForm: { //查询过滤的条件
					orderStatus:'',
					orderTime:''
				},
				pagination:{
					totalSize:0,
					pageSize: 20,
					currentPage:1,
				},
				tableColumn:[ 
					{
						columnName:'id', //主键字段，修改和删除的依赖列
						columnLabel:'ID',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false, //是否在新增或修改对话框中显示该属性字段
					},
					{
						columnName:'orderSn',
						columnLabel:'订单序号',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:true, //是否在新增或修改对话框中显示该属性字段
					},
					{
						columnName:'userId',
						columnLabel:'用户ID',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false,
					},
					{
						columnName:'userName',
						columnLabel:'用户',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:false,
						type:'pic'
					},
					{
						columnName:'userNickName',
						columnLabel:'用户',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'orderStatus',
						columnLabel:'订单状态',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:true,
						type:'select',
						selectListData:[],
						// selectListData:this.orderStatusList,
						dataQueryUrl:'order/selectOrderStatus',
					},
					{
						columnName:'orderStatusName',
						columnLabel:'订单状态',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:false,
					},
					{
						columnName:'shippingStatus',
						columnLabel:'交易状态',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'payStatus',
						columnLabel:'支付状态',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'consignee',
						columnLabel:'收件人',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'country',
						columnLabel:'收件国家',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'province',
						columnLabel:'收件省',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'city',
						columnLabel:'收件市',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'district',
						columnLabel:'收件区',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'address',
						columnLabel:'收件详细地址',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'mobile',
						columnLabel:'收件电话',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'postScript',
						columnLabel:'收件邮编地址',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'shippingFee',
						columnLabel:'交易金额',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'payName',
						columnLabel:'付款人',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'payId',
						columnLabel:'支付ID',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'actualPrice',
						columnLabel:'实际价格',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'integral',
						columnLabel:'积分',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'integralMoney',
						columnLabel:'积分金额',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'orderPrice',
						columnLabel:'订单总价',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'goodsPrice',
						columnLabel:'商品总价',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'freightPrice',
						columnLabel:'配送费用',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'addTime',
						columnLabel:'创建时间',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'confirmTime',
						columnLabel:'确认时间',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false,
					},
					{
						columnName:'payTime',
						columnLabel:'支付时间',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false,
					},
					{
						columnName:'couponId',
						columnLabel:'优惠劵',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'parentId',
						columnLabel:'parentId',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'couponPrice',
						columnLabel:'优惠价格',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:true,
					},
					{
						columnName:'callbackStatus',
						columnLabel:'是否召回状态',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:true,
					}
				],
				orderGoodsColumn:[
					{
						columnName:'id', //主键字段，修改和删除的依赖列
						columnLabel:'ID',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false, //是否在新增或修改对话框中显示该属性字段
					},
					{
						columnName:'orderId',
						columnLabel:'订单编号',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:true, //是否在新增或修改对话框中显示该属性字段
					},
					{
						columnName:'goodsId', //主键字段，修改和删除的依赖列
						columnLabel:'产品ID',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false, //是否在新增或修改对话框中显示该属性字段
					},
					{
						columnName:'goodsName',
						columnLabel:'产品名称',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true, //是否在新增或修改对话框中显示该属性字段
					},
					{
						columnName:'goodsSn', //主键字段，修改和删除的依赖列
						columnLabel:'产品编号',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false, //是否在新增或修改对话框中显示该属性字段
					},
					{
						columnName:'productId',
						columnLabel:'商品编号',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:true, //是否在新增或修改对话框中显示该属性字段
					},
					{
						columnName:'number',
						columnLabel:'数量',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true, //是否在新增或修改对话框中显示该属性字段
					},
					{
						columnName:'marketPrice', //主键字段，修改和删除的依赖列
						columnLabel:'市场价格',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:false, //是否在新增或修改对话框中显示该属性字段
					},
					{
						columnName:'retailPrice',
						columnLabel:'实际价格',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true, //是否在新增或修改对话框中显示该属性字段
					},
					{
						columnName:'goodsSpecifitionIds',
						columnLabel:'产品属性ID',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:true, //是否在新增或修改对话框中显示该属性字段
					},
					{
						columnName:'goodsSpecifitionNameValue',
						columnLabel:'产品属性名',
						isColumnShow:true, //是否在table表格里显示
						isModifyDialogEnabled:true, //是否在新增或修改对话框中显示该属性字段
					},
					{
						columnName:'isReal', //主键字段，修改和删除的依赖列
						columnLabel:'isReal',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:true, //是否在新增或修改对话框中显示该属性字段
					},
					{
						columnName:'listPicUrl', //主键字段，修改和删除的依赖列
						columnLabel:'图片地址',
						isColumnShow:false, //是否在table表格里显示
						isModifyDialogEnabled:true, //是否在新增或修改对话框中显示该属性字段
						isPicColumn:true
					}
				],
				urlPaths:{
					queryList:'order/listAll',
					delByKey:'order/delete',
					insert:'order/add',
					updateByKey:'order/update',
					queryOrderGoods:'order/findOrderGoodsByOrderId',
					queryUserById:'user/findById',
					queryOrderStatusList:'order/selectOrderStatus',
					importFileUrl:store.state.global.url +'/upload/image',
				},
				configform: {},
				index: '',
				dialogVisible: false,
				dialogTitle:'新增',
				rules: {},
				currentRow: null,
				uploadImgs: {},
				uploadDatas:{
					clazz:'order',
					columnName:''
				}
			}
		}, 
		computed:{
		},
		watch:{
// 			tableDatalist:{
// 				handler: function (newVal,oldVal){
// 					if (newVal!=undefined && newVal.length>0){
// 						for(var data of newVal){
// 							this.$httpExt().get(this.urlPaths.queryUserById, {
// 								userId:data.userId,
// 								rowId:data.id
// 							}).then((response) => {
// 								var row= response.result;
// 								console.log(row);
// 								var rowId = response.msg;
// 								var currentRow = newVal.find((element) => (element.id == rowId));
// 								if (row!=null){
// 									if (row.avatar!=null || row.avatar!=undefined){
// 										Vue.set(currentRow,'userId',row.avatar);
// 									} else {
// 										Vue.set(currentRow,'userId',row.nickname);
// 									}
// 								} 
// 							},(response) => {
// 								Message({
// 									message: '服务器请求失败，请重试！',
// 									type: 'warning'
// 								});
// 							});
// 						}
// 					}
// 				}
// 			}
		},
    	mounted() {
    		this.initData();
		},
		methods: {
			initData(){
    			this.queryTableData();
				this.queryOrderStatusData();
			},
			queryTableData(){
				/*查询接口*/
				var reqParams = {};
				reqParams.orderStatus=this.conditionForm.orderStatus;
				console.log(this.conditionForm.orderTime);
				if (this.conditionForm.orderTime!=undefined && this.conditionForm.orderTime.length>0){
					if (this.conditionForm.orderTime[0] !=null){
						reqParams.orderStartTime=this.conditionForm.orderTime[0].getTime();
					}
					if (this.conditionForm.orderTime[1] !=null){
						reqParams.orderEndTime=this.conditionForm.orderTime[1].getTime();
					}
				}
				reqParams.startPage=this.pagination.currentPage;
				reqParams.pageSize=this.pagination.pageSize;
				// console.log(reqParams);
				this.$httpExt().post(this.urlPaths.queryList, reqParams).then((response) => {
					var rows= response.rows;
					// console.log(rows);
					for(let [index, item] of rows.entries()){
						item.index = index
					}
					this.tableDatalist = rows;
					this.pagination.totalSize = response.totalSize;
					this.queryUserInfo();
				},(response) => {
					Message({
						message: '服务器请求失败，请重试！',
						type: 'warning'
					});
				});
			},
			queryOrderStatusData(){
				this.$httpExt().get(this.urlPaths.queryOrderStatusList).then((response) => {
					var rows= response.rows;
					this.orderStatusList = rows;
				},(response) => {
					Message({
						message: '服务器请求失败，请重试！',
						type: 'warning'
					});
				});
			},
			/*查询用户信息,将ID转换成头像或昵称显示*/
			queryUserInfo(){
				for(var data of this.tableDatalist){
					this.$httpExt().get(this.urlPaths.queryUserById, {
						userId:data.userId,
						rowId:data.id
					}).then((response) => {
						var row= response.result;
						// console.log(row);
						var rowId = response.msg;
						var currentRow = this.tableDatalist.find((element) => (element.id == rowId));
						if (row!=null){
							if (row.avatar!=null && row.avatar.length>0){
								Vue.set(currentRow,'userName',row.avatar);
							} else {
	-							Vue.set(currentRow,'userId',row.nickname);
								Vue.set(currentRow,'userName',row.nickname);
							}
							Vue.set(currentRow,'userNickName',row.nickname);
						} 
					},(response) => {
						Message({
							message: '服务器请求失败，请重试！',
							type: 'warning'
						});
					});
				}
			},
			queryOrderGoods(orderId){
				/*查询接口*/
				this.$httpExt().get(this.urlPaths.queryOrderGoods, {
					orderId:orderId
				}).then((response) => {
					var rows= response.rows;
					var orderId = response.msg;
					// console.log(rows);
					// this.orderGoodslist.push(orderId, rows);
					// this.orderGoodslist[orderId]=rows;
					Vue.set(this.orderGoodslist,orderId,rows);
				},(response) => {
					Message({
						message: '服务器请求失败，请重试！',
						type: 'warning'
					});
				});
			},
			/*翻页*/
			handleCurrentChangePage(val){
				this.pagination.currentPage = val;
				// console.log(this.pagination.currentPage);
				// 数据量少，前端分页处理，如果后端分页，后端添加分页逻辑并重新调用查询接口
				this.queryTableData();
			},
			/*切换显示条数*/
			pageSizeChange(val){
				this.pagination.pageSize = val;
				// console.log(this.pagination.pageSize);
				// 数据量少，前端分页处理，如果后端分页，后端添加分页逻辑并重新调用查询接口
				this.queryTableData();
			},
			/*选择一条数据*/
			handleCurrentChange(val) {
				if(!val) {
					return
				}
				this.currentRow = val;
				this.index = val.index+''
// 				console.log('this.currentRow ',this.currentRow);
// 				console.log('this.index ',this.index);
			},
			/*展开或关闭一行记录*/
// 			handleExpandTable(row, expandedRows){
// 				console.log(row);
// 				console.log(expandedRows);
// 				var datas = this.orderGoodslist[row.id];
// 				if(datas ==undefined || datas==[]){
// 					this.queryOrderGoods(row.id);
// 				} 
// 			},
			handleExpandTable(row, event){
				// console.log(row);
				var datas = this.orderGoodslist[row.id];
				if(datas ==undefined || datas==[]){
					this.queryOrderGoods(row.id);
				} 
			},
			/*新增*/
			addFn(){
				this.dialogVisible = true;
				this.dialogTitle='新增';
				/*if(this.$refs['configform']!=undefined) {
					this.$refs['configform'].resetFields();
				}*/
				this.setFormData();
			},
			/*编辑*/
			editFn(){
				if(this.index) {
					this.dialogVisible = true;
					this.dialogTitle='编辑';
					this.setFormData();
				}else{
					Message({
						message: '请选择一条进行操作！',
						type: 'warning'
					});
				}
			},
			setFormData(){
				var form ={};
				for(let col of this.tableColumn){
					if (this.dialogTitle=='新增'){
						if (col.defaultValue != undefined && col.defaultValue!=''){
							form[col.columnName] = col.defaultValue;
						} else {
							form[col.columnName] = '';
						}
					} else {
// 						if (col.type==='select'){
// 							var value= {};
// 							value['value']=this.currentRow[col.columnName];
// 							form[col.columnName] = value;
// 							console.log(form);
// 						} else {
							form[col.columnName] = this.currentRow[col.columnName];
						// }
					}
				}
				this.configform = form;
			},
			/*删除*/
			deleteFn(){
				if(this.index) {
					this.$confirm('你确定要删除吗？', '删除提示', {
			          	confirmButtonText: '确定',
			          	cancelButtonText: '取消',
			          	type: 'warning'
			        }).then(() => {
			        	//调删除接口
			        	this.$httpExt().get(this.urlPaths.delByKey, {
							id:this.currentRow.id
						}).then((response) => {
//							Message({
//								message: response.msg,
//								type: 'success'
//							});
							this.queryTableData();
						},(response) => {
							Message({
								message: '服务器请求失败，请重试！',
								type: 'warning'
							});
						});
			        });
				}else{
					Message({
						message: '请选择一条进行操作！',
						type: 'warning'
					});
				}
			},
			/*提交*/
			saveSubmit(){				
				var that = this;
				if(this.dialogTitle == '新增') {
//							that.configform.id = '';
					var url = this.urlPaths.insert;
				} else {
					var url = this.urlPaths.updateByKey;
				}
				console.log(url);
				console.log(that.configform);
				this.$httpExt().post(url,that.configform).then((response) => {
					if(response.succ == 'ok') {
						that.queryTableData();
						that.dialogVisible = false;
					}
				}, (data) => {
					Message({
						message: data.msg ? data.msg : '服务器请求失败，请重试！',
						type: 'warning'
					});
				});
			},
			closeDialog(){
				this.dialogVisible = false;
			},
			handleReset() {
				this.newlyFormVisible = false
			},
	    }
	}
</script>
<style>
.fl{
	float: left;
}
.order a{
	color: #20a0ff;
	text-decoration: none;
}
.order-table-expand {
    font-size: 0;
  }
.order-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
.order-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

</style>